<template>
	<view style="background: #000;">
	    <swiper
	      class="swiper"
	      :autoplay="false"
	      vertical
	      :duration="500"
	      :current="current"
	      @change="changeCurrent">
			<swiper-item
				ref="swiperItem"
				class="swiper-item"
				v-for="(item, index) in originList"
				:key="index"
			  >
				<view class="container" :style="{ height: videoHeight + 'px' }">
					<video
						ref="myVideo"
						:id="'myVideo' + index"
						:style="'width:750rpx;height:' + videoHeight + 'px'"
						class="videoImg"
						:src="item.file"
						autoplay
						:controls="false"
						:loop="true"
						:show-play-btn="false"
						:show-center-play-btn="false"
						@timeupdate="videoTimeUpdateEvent"
					  ></video>
					<view v-if="!play" class="play iconfont iconarrow-" :style="'left:375rpx; top:'+(videoHeight / 2)+'px;font-size: 80rpx;color: #ffffff;'"></view>
					<view class="speed" @click="handleStop" :style="'height:'+(videoHeight / 3)+'px; top: '+(videoHeight / 3)+'px;z-index:999'" />
				</view>
				<view class="rightSide">
					<view class="shop">
						<navigator hover-class="none"
								:url="'/otherpages/shop/index/index?site_id=' + shopInfo.site_id" class="box" >
								<image style="width:100%;border-radius: 100%;"  v-if="shopInfo.avatar" :src="$util.img(shopInfo.avatar)"
										@error="shopInfo.avatar = $util.getDefaultImage().default_shop_img"
										mode="widthFix" />
									<image v-else style="width:100%;border-radius: 100%;" :src="$util.getDefaultImage().default_shop_img" mode="widthFix" />
									
						</navigator>
					</view>
					<view class="item" @click="editCollection()">
						<view class="img iconfont" :class="whetherCollection == 1 ? 'iconlikefill color-base-text' : 'iconguanzhu1'" style="color: #ffffff;"></view>
					</view>
					<view class="item" @click="openSharePopup()">
						<view class="img follow iconfont iconfenxiang2" style="color: #ffffff;"></view>
						<!-- <view class="name"><text>分享</text></view> -->
					</view>
					<!-- <view class="item">
						<view class="img"><image src="/static/icon-sd.png" mode="widthFix" /></view>
						<view class="name"><text>晒单</text></view>
					</view> -->
				</view>
				<view class="butBox" @tap.stop="toDetail(goodsSkuDetail)">
					<view class="dTitile">{{ goodsSkuDetail.goods_name }}</view>
					<view class="goodBox">
						<view class="img"><image :src="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" mode="widthFix" /></view>
						<view class="info">
							<view class="title">{{ goodsSkuDetail.goods_name }}</view>
							<view class="numBox">
								<text>{{ goodsSkuDetail.click_num }}人看过</text>
								<text>销量：{{ goodsSkuDetail.sale_num }}</text>
							</view>
							<view class="price">¥{{ goodsSkuDetail.price }}</view>
						</view>
						<view class="anNU goods-action-button" :class="goodsSkuDetail.is_virtual == 0 ? 'active2' : 'active4'" >立即购买</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 分享弹窗 -->
		<view @touchmove.prevent.stop>
			<uni-popup ref="sharePopup" type="bottom" class="share-popup">
				<view>
					<view class="share-title">分享</view>
					<view class="share-content">
						<!-- #ifdef MP -->
						<view class="share-box">
							<button class="share-btn" :plain="true" open-type="share">
								<view class="iconfont iconiconfenxianggeihaoyou"></view>
								<text>分享给好友</text>
							</button>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view class="share-box" v-if="goodsCircle">
							<button class="share-btn" :plain="true" @click="openBusinessView">
								<view class="iconfont iconhaowuquan"></view>
								<text>分享到好物圈</text>
							</button>
						</view>
						<!-- #endif -->
						<view class="share-box" @click="openPosterPopup">
							<button class="share-btn" :plain="true">
								<view class="iconfont iconpengyouquan"></view>
								<text>生成分享海报</text>
							</button>
						</view>
						<!-- #ifdef H5 -->
						<view class="share-box" @click="copyUrl">
							<button class="share-btn" :plain="true">
								<view class="iconfont iconfuzhilianjie"></view>
								<text>复制链接</text>
							</button>
						</view>
						<!-- #endif -->
					</view>
					<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
				</view>
			</uni-popup>
			<!-- SKU选择 -->
			<ns-goods-sku ref="goodsSku" @refresh="refreshGoodsSkuDetail" :goods-detail="goodsSkuDetail"
				:max-buy="goodsSkuDetail.max_buy" :min-buy="goodsSkuDetail.min_buy"></ns-goods-sku>
		</view>
	</view>
</template>

<script>
	import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
	export default {
		components: {
			nsGoodsSku
		},
		data() {
			return {
				skuId: 0,
				// 商品详情
				goodsSkuDetail: {
					goods_id: 0,
					goods_service: []
				},
				// 店铺详情
				shopInfo: {
					logo: '',
					shop_baozh: 0,
					shop_qtian: 0,
					shop_zhping: 0,
					shop_erxiaoshi: 0,
					shop_tuihuo: 0,
					shop_shiyong: 0,
					shop_shiti: 0,
					shop_xiaoxie: 0
				},
				cartCount: 0, // 购物车商品数量
				whetherCollection: 0, 
				
				// 解决每个商品SKU图片数量不同时，无法切换到第一个，导致轮播图显示不出来
				swiperInterval: 1,
				swiperAutoplay: false,
				swiperCurrent: 1,
				switchMedia: 'img',
				
				windowHeight : uni.getSystemInfoSync().windowHeight,
				videoHeight: uni.getSystemInfoSync().windowHeight,
				globalData: {
					statusBarHeight: 0, // 状态导航栏高度
					navHeight: 0, // 总体高度
					navigationBarHeight: 0, // 导航栏高度(标题栏高度)
				  },
				originList: [
				],
				current: 0,
				play: false,
				videoContext: null
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext("myVideo" + this.current, this);
			this.playthis();
		},
		onLoad(data) {
			this.skuId = data.sku_id || 0;
			if (data.suid) uni.setStorageSync('suid', data.suid);
			// 小程序扫码进入
			if (data.scene) {
				var sceneParams = decodeURIComponent(data.scene);
				sceneParams = sceneParams.split('&');
				if (sceneParams.length) {
					sceneParams.forEach(item => {
						if (item.indexOf('sku_id') != -1) this.skuId = item.split('-')[1];
						if (item.indexOf('suid') != -1) uni.setStorageSync('suid', item.split('-')[1]);
					});
				}
			}
			// 状态栏高度
			this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			console.log(this.globalData.statusBarHeight)
		 
			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()
			// console.log(custom)
		 
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
			// console.log("导航栏高度："+this.globalData.navigationBarHeight)
		 
			// 总体高度 = 状态栏高度 + 导航栏高度
			this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight
			this.videoHeight = this.windowHeight - this.globalData.navHeight
			// #endif
			
			console.log(this.windowHeight)

			//this.getService();
		},
		async onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
		
			if (uni.getStorageSync('token')) {
				this.getMemberId();
			}
			//同步获取商品详情
			await this.getGoodsSkuDetail();
		},
		methods: {
			initSwiperData(current) {
				if (this.videoContext) {
					this.videoContext.pause()
					this.play = false
					this.videoContext = null;
				}
				this.videoContext = uni.createVideoContext("myVideo" + current, this);
				setTimeout(() => {
					this.playthis();
				}, 500);
			},
			getMemberId() {
				this.$api.sendRequest({
					url: "/api/member/id",
					success: res => {
						if (res.code >= 0) {
							this.memberId = res.data;
						}
					}
				});
			},
			//商品详情
			toDetail(item) {
				this.$util.redirectTo('/pages/goods/detail/detail', {
					sku_id: item.sku_id
				});
			},
			// 立即购买
			buyNow() {
				if (!uni.getStorageSync('token') && this.preview == 0) {
					this.$refs.login.open('/pages/goods/detail/detail?sku_id=' + this.skuId);
					return;
				}
				this.$refs.goodsSku.show("buy_now", () => {
					this.getCartCount();
				});
				
			},
			//获取购物车数量
			getCartCount() {
				this.$store.dispatch('getCartNumber').then((e) => {
					this.cartCount = e;
				});
			},
			/**
			 * 刷新商品详情数据
			 * @param {Object} goodsSkuDetail
			 */
			refreshGoodsSkuDetail(goodsSkuDetail) {
				Object.assign(this.goodsSkuDetail, goodsSkuDetail);
				this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
				if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
			
				// 解决轮播图数量不一致时，切换到第一个
				if (this.swiperCurrent > this.goodsSkuDetail.sku_images.length) {
					this.swiperAutoplay = true;
					this.swiperCurrent = 1;
					setTimeout(() => {
						this.swiperAutoplay = false;
					}, 40);
				}
			},
			// 获取商品详情
			async getGoodsSkuDetail(skuId) {
				this.skuId = skuId || this.skuId;
				let res = await this.$api.sendRequest({
					url: '/api/goodssku/detail',
					async: false,
					data: {
						sku_id: this.skuId
					}
				});
				let data = res.data;
				if (data.goods_sku_detail != null) {
					if (data.goods_sku_detail.promotion_type == 'presale') {
						this.$util.redirectTo('/promotionpages/presale/detail/detail', {id: data.goods_sku_detail.presale_id, sku_id: this.skuId}, 'reLaunch');
						return;
					}
					
					this.goodsSkuDetail = data.goods_sku_detail;
					this.goodsSkuDetail.preview = this.preview;
					this.shopInfo = data.shop_info;
					this.skuId = this.goodsSkuDetail.sku_id;
			
					this.goodsSkuDetail.goods_service = [];
					if (this.shopInfo.shop_baozh == 1) {
						this.goodsSkuDetail.goods_service.push({
							service_name: '保证服务',
							desc: '保证服务'
						});
					}
			
					if (this.shopInfo.shop_qtian == 1) {
						this.goodsSkuDetail.goods_service.push({
							service_name: '7天退换',
							desc: '满足7天无理由退换货申请的前提下，包邮商品需要买家承担退货邮费，非包邮商品需要买家承担发货和退货邮费'
						});
					}
			
					if (this.shopInfo.shop_zhping == 1) {
						this.goodsSkuDetail.goods_service.push({
							service_name: '正品保障',
							desc: '商品支持正品保障服务'
						});
					}
			
					if (this.shopInfo.shop_erxiaoshi == 1) {
						this.goodsSkuDetail.goods_service.push({
							service_name: '两小时发货',
							desc: '付款后2小时内发货'
						});
					}
			
					if (this.shopInfo.shop_tuihuo == 1) {
						this.goodsSkuDetail.goods_service.push({
							service_name: '退货承诺',
							desc: '退货承诺'
						});
					}
			
					if (this.shopInfo.shop_shiyong == 1) {
						this.goodsSkuDetail.goods_service.push({
							service_name: '试用中心',
							desc: '试用中心'
						});
					}
			
					if (this.shopInfo.shop_shiti == 1) {
						this.goodsSkuDetail.goods_service.push({
							service_name: '实体验证',
							desc: '实体验证'
						});
					}
			
					if (this.shopInfo.shop_xiaoxie == 1) {
						this.goodsSkuDetail.goods_service.push({
							service_name: '消协保证',
							desc: '如有商品质量问题、描述不符或未收到货等，您有权申请退款或退货，来回邮费由卖家承担'
						});
					}
			
					//媒体
					if (this.goodsSkuDetail.video_url){
						this.switchMedia = "video";
						this.originList = [{file:this.$util.img(this.goodsSkuDetail.video_url)}]
					} 
			
					if (this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
					else this.goodsSkuDetail.sku_images = [];
			
					// 多规格时合并主图
					if (this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image) {
						this.goodsSkuDetail.goods_image = this.goodsSkuDetail.goods_image.split(",");
						this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.concat(this.goodsSkuDetail.goods_image);
					}
			
					this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
			
					// 当前商品SKU规格
					if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format);
			
					// 商品属性
					if (this.goodsSkuDetail.goods_attr_format) {
						let goods_attr_format = JSON.parse(this.goodsSkuDetail.goods_attr_format);
						this.goodsSkuDetail.goods_attr_format = this.$util.unique(goods_attr_format, "attr_id");
						for (var i = 0; i < this.goodsSkuDetail.goods_attr_format.length; i++) {
							for (var j = 0; j < goods_attr_format.length; j++) {
								if (this.goodsSkuDetail.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id && this.goodsSkuDetail.goods_attr_format[
										i].attr_value_id != goods_attr_format[j].attr_value_id) {
									this.goodsSkuDetail.goods_attr_format[i].attr_value_name += "、" + goods_attr_format[j].attr_value_name;
								}
							}
						}
					}
			
					// 商品SKU格式
					if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format);
			
					this.$langConfig.title(this.goodsSkuDetail.goods_name);
			
					// 商品详情
					// if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = htmlParser(this.goodsSkuDetail.goods_content);
			
					// 限时折扣
					if (this.goodsSkuDetail.promotion_type == 1 && this.addonIsExit.discount) {
						//检测倒计时
						if ((this.goodsSkuDetail.end_time - res.timestamp) > 0) {
							this.goodsSkuDetail.discountTimeMachine = this.$util.countDown(this.goodsSkuDetail.end_time - res.timestamp);
						} else {
							this.goodsSkuDetail.promotion_type = 0;
						}
					}
					if (this.goodsSkuDetail.promotion_type == 1 && this.goodsSkuDetail.discountTimeMachine) {
						this.goodsSkuDetail.show_price = this.goodsSkuDetail.discount_price;
					} else if(this.goodsSkuDetail.member_price>0){
						this.goodsSkuDetail.show_price = this.goodsSkuDetail.member_price;
					} else {
						this.goodsSkuDetail.show_price = this.goodsSkuDetail.price;
					}
					
					this.contactData = {
						title: this.goodsSkuDetail.sku_name,
						path: '/pages/goods/detail/detail?sku_id=' + this.skuId,
						img: this.$util.img(this.goodsSkuDetail.sku_image, {
							size: 'big'
						})
					}
					if (uni.getStorageSync('token')) {
						this.getWhetherCollection();
					}
			
					// this.setWechatShare();
			
					if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
			
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
			
					// this.getService();
			
					// #ifdef MP-WEIXIN
					// this.getGoodScircleConfig();
					// #endif
				} else {
					this.$util.redirectTo('/pages/index/index/index', {}, 'reLaunch');
				}
			},
			//获取用户是否关注
			getWhetherCollection() {
				this.$api.sendRequest({
					url: "/api/goodscollect/iscollect",
					data: {
						goods_id: this.goodsSkuDetail.goods_id
					},
					success: res => {
						this.whetherCollection = res.data;
					}
				});
			},
			editCollection() {
			
				if (uni.getStorageSync('token')) {
			
					//未关注添加关注
					if (this.whetherCollection == 0) {
						this.$api.sendRequest({
							url: "/api/goodscollect/add",
							data: {
								sku_id: this.skuId
							},
							success: res => {
								var data = res.data;
								if (data > 0) {
									this.whetherCollection = 1;
								}
							}
						});
					} else {
						//已关注取消关注
						this.$api.sendRequest({
							url: "/api/goodscollect/delete",
							data: {
								goods_id: this.goodsSkuDetail.goods_id
							},
							success: res => {
								var data = res.data;
								if (data > 0) {
									this.whetherCollection = 0;
								}
							}
						});
					}
				} else {
					this.$refs.login.open('/pages/goods/detail/detail?sku_id=' + this.skuId);
				}
			},
			//-------------------------------------分享-------------------------------------
			// 打开分享弹出层
			openSharePopup() {
				this.$refs.sharePopup.open();
			},
			// 关闭分享弹出层
			closeSharePopup() {
				this.$refs.sharePopup.close();
			},
			// 打开海报弹出层
			openPosterPopup() {
				this.getGoodsPoster();
				this.$refs.sharePopup.close();
				this.$refs.posterPopup.open();
				if (this.poster != '-1') {
					setTimeout(() => {
						let view = uni.createSelectorQuery().in(this).select(".poster-layer .image-wrap");
						view.fields({
							size: true,
						}, data => {
							let posterWhith = data.width;
							let ratio = parseFloat((740 / posterWhith).toFixed(2));
							if (uni.getStorageSync('token')) {
								this.posterHeight = parseInt(1120 / ratio);
							} else {
								this.posterHeight = parseInt(1100 / ratio);
							}
						}).exec();
					}, 100);
				}
			},
			// 关闭海报弹出层
			closePosterPopup() {
				this.$refs.posterPopup.close();
			},
			//生成海报
			getGoodsPoster() {
				//活动海报信息
				let qrcode_param = {
					sku_id: this.skuId
				};
				if (this.memberId) qrcode_param.suid = this.memberId;
				this.$api.sendRequest({
					url: "/api/goods/poster",
					data: {
						page: '/pages/goods/detail/detail',
						qrcode_param: JSON.stringify(qrcode_param)
					},
					success: res => {
						if (res.code == 0) {
							this.poster = res.data.path + "?time=" + new Date().getTime();
						} else {
							this.posterMsg = res.message;
						}
					}
				});
			},
			changeCurrent(res) {
				this.initSwiperData(res.detail.current)
			},
			videoTimeUpdateEvent(e) {
				let currentTime = Number(e.detail.currentTime);
			},
			playthis() {
				if (this.play === false) {
					this.videoContext.play()
					this.play = true
				}
			},
			pauseVideo() {
				if (this.play === true) {
					this.videoContext.pause()
					this.play = false
				}
			},
			handleStop() {
				if (!this.play) {
					this.playthis()
				} else {
					this.pauseVideo()
				}
			}
		}
	}
</script>

<style lang="scss">
	.share-popup,
	.uni-popup__wrapper-box {
		.share-title {
			line-height: 60rpx;
			font-size: $font-size-toolbar;
			padding: 15rpx 0;
			text-align: center;
		}
	
		.share-content {
			display: flex;
			display: -webkit-flex;
			-webkit-flex-wrap: wrap;
			-moz-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			-o-flex-wrap: wrap;
			flex-wrap: wrap;
			padding: 80rpx 15rpx;
	
			.share-box {
				flex: 1;
				text-align: center;
	
				.share-btn {
					margin: 0;
					padding: 0;
					border: none;
					line-height: 1;
					height: auto;
					text {
						margin-top: 20rpx;
						font-size: $font-size-tag;
						display: block;
						color: $color-title;
					}
				}
	
				.iconfont {
					font-size: 80rpx;
					line-height: initial;
				}
				.iconfuzhilianjie,
				.iconpengyouquan,
				.iconhaowuquan,
				.iconiconfenxianggeihaoyou {
					color: #07c160;
				}
			}
		}
	
		.share-footer {
			height: 90rpx;
			line-height: 90rpx;
			border-top: 2rpx solid $color-line;
			text-align: center;
		}
	}
	
	.swiper {
		position: relative;
		z-index: 100;
		height:100vh;
	}
	.swiper-item {
		position: relative;
		overflow: hidden;
	}
	.play {
	  position: absolute;
	  z-index: 999;
	  margin-left: -40rpx;
	  margin-top: -40rpx;
	  width: 80rpx;
	  height: 80rpx;
	}
	.speed {
		position: absolute; 
		z-index: 998;
		bottom: 0;
		width: 450rpx;
		margin-left: 150rpx;
	}
	.butBox {
		position: absolute;
		z-index: 1001;
		bottom: 20px;
		left: 10px;
	}
	.butBox .dTitile {
		width: 600rpx;
		color: #fff;
		font-size: 12px;
		margin-bottom: 20rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2; /* 定义文本的行数 */
		-webkit-box-orient: vertical;
		line-height: 1.5em;
	}
	.goodBox {
		width: 675rpx;
		padding: 10px;
		background: #fff;
		display: flex;
		flex-direction: row;
		border-radius: 10px;
	}
	.goodBox .img { margin-right: 15rpx; }
	.goodBox .img image {
		width: 120rpx;
	}
	.goodBox .info {
		width: 520rpx;
	}
	.goodBox .title {
		font-size: 12px;
		white-space: nowrap;
		text-overflow: ellipsis; 
		overflow: hidden;
	}
	.goodBox .numBox text {
		color: #a2a0a1;
		font-size: 12px;
		margin-right: 10px;
	}
	.goodBox .price {
		font-size: 30rpx;
		color: red;
	}
	.goodBox .anNU {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		background: #48b964;
		font-size: 12px;
		color: #fff;
		font-weight: 300;
		padding: 5px 10px;
		border-radius: 10rpx;
	}
	.rightSide {
		position: absolute;
		z-index: 1002;
		bottom: 150px;
		right: 20px;
		.shop {
			width: 78rpx;
			margin-bottom: 15px;
		}
		.item {
			color: #fff;
			font-size: 12px;
			margin-bottom: 25rpx;
			text-align: center;
			line-height: 30rpx;
		}
		.item image { width: 50rpx; }
	}
	/deep/ .goods-action-button.active1 {
		padding-left: 10px;
	}
	
	/deep/ .goods-action-button.active2 {
		padding-right: 10px;
	}
	
	/deep/ .goods-action-button.active3 {
		padding: 0 10px;
	}
	
	/deep/ .goods-action-button.active4 {
		padding: 0 10px;
	}
	
	/deep/ .uni-popup__wrapper.bottom {
		border-radius: 24rpx 24rpx 0 0;
	}
	
	/deep/ .goods-action-button.active1 .action-buttom-wrap {
		height: 36px;
		line-height: 36px;
		border-top-left-radius: 36rpx;
		border-bottom-left-radius: 36rpx;
	}
	
	/deep/ .goods-action-button.active2 .action-buttom-wrap {
		height: 36px;
		line-height: 36px;
		border-top-right-radius: 36rpx;
		border-bottom-right-radius: 36rpx;
	}
	
	/deep/ .goods-action-button.active3 .action-buttom-wrap {
		height: 36px;
		line-height: 36px;
		border-radius: 36px;
		margin: 20rpx 0;
	}
	
	/deep/ .goods-action-button.active4 .action-buttom-wrap {
		height: 36px;
		line-height: 36px;
		border-radius: 36px;
	}
</style>
